<!DOCTYPE html>
<!-- saved from url=(0052)http://49.233.183.177:8080/addressbook/register.html -->
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>修改个人信息</title>

  <link href="css/sb-admin-2.min.css" rel="stylesheet">
  <!-- 引入样式 -->
  <link href="css/css/index.css" rel="stylesheet" type="text/css"/>
  <!-- 引入VUE库 -->
  <script src="js/vue.min.js"></script>
  <!-- 引入组件库 -->
  <script src="js/js/js/index.js"></script>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script src="js/axios.min.js"></script>
</head>

<body style="background-color: darkgray;background-image: url(image/bg9.jpg)">

<div class="container">

  <div class="card o-hidden border-0 shadow-lg my-5">
    <div class="card-body p-0">
      <!-- Nested Row within Card Body -->
      <div>
        <div style="background-color: #00C2FF" id="app">
          <div class="p-5">
            <div class="text-center">
              <h1 class="h4 text-gray-900 mb-4">修改个人信息</h1>
            </div>
            <form class="user" enctype="multipart/form-data" action="Modify.s"  method="post" onSubmit="return beforeSubmit(this)">
              <div style="display: flex;width: 100%;margin-top: 10px;height: 100px;padding-top: 10px">
                <label for="uploadImg">
                  <img :src="uploadImgUrl" alt="点击上传头像" style="height: 100px;width: 100px">
                </label>
                <input type="file" id="uploadImg" name="file" style="display: none" accept="image/jpeg,image/x-png,image/gif" v-on:change="uploadImg($event)">
              </div>

              <div class="form-group">
                <input type="number" class="form-control form-control-user" id="regist_phone"
                       name="regist_phone" placeholder="请输入电话号码" :value="user.account" readonly>
              </div>
              <div class="form-group">
                <input type="text" class="form-control form-control-user" id="regist_name"
                       name="regist_name" placeholder="请输入昵称" :value="user.nickname">
              </div>
              <div class="form-group">
                <input type="password" class="form-control form-control-user" id="regist_pwd"
                       name="regist_pwd" placeholder="请输入密码" :value="user.password">
              </div>
              <div class="form-group">
                <input type="password" class="form-control form-control-user" id="regist_pwd_con"
                       name="regist_pwd_con" placeholder="确认密码" :value="user.password">
              </div>
              <div class="form-group">
                <input type="text" class="form-control form-control-user" id="regist_realname"
                       name="regist_realname" placeholder="请输入姓名(选填)" :value="user.truename">
              </div>
              <div class="form-group">
                <select id="regist_sex" name="regist_sex">
                  <option selected disabled>请选择性别(选填)</option>
                  <option value="男">男</option>
                  <option value="女">女</option>
                </select>
              </div>
              <div class="form-group">
                <input type="number" class="form-control form-control-user" id="regist_age"
                       name="regist_age" placeholder="请输入年龄(选填)" :value="user.age">
              </div>
              <div class="form-group">
                <input type="email" class="form-control form-control-user" id="regist_e-mail"
                       name="regist_e-mail" placeholder="请输入邮箱(选填)" :value="user.email">
              </div>
              <font color="red"></font>
              <button type="submit" class="btn btn-primary btn-user btn-block" id="registsubmit">修改
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script >
  var v = new Vue({
    el: "#app",
    data: {
      user:[],
      uploadImgUrl:''
    },
    created(){
      axios.get("QueryUser.s").then(res=>{
        this.user=res.data;
        this.uploadImgUrl=this.user.head_img;
        console.info(this.user);
      })
    },
    methods: {
      uploadImg(e){
        let that = this;
        let file = e.target.files[0];
        //KB单位,可以获取图片的大小，到时候可以根据图片大小进行选择上传
        let imgSize = file.size/1024;

        let reader = new FileReader();
        reader.readAsDataURL(file);

        reader.onloadend = function () {
          // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
          let dataURL = reader.result;
          //在这里就可以进行图片地址的获取了，到时候后台上传的图片就是根据这个来的
          //that.uploadImgUrl = dataURL;这个就是展示了上传的图片
          that.uploadImgUrl = dataURL;
          //这里就可以发送请求了，也可以选择之后发送，反正图片地址都获取了
          $.ajax({
            type:"post",
            url:"上传的地址",
            async:true,
            data:{
              imgUrl:dataURL,
              avatar_wx:1,
              token:token,
              uid:uid,
            },
            success:function(e){
              that.avatar=dataURL;
              alert('修改成功');
            }
          });
        }
      },
    }
  })
</script>
<script type="text/javascript">
  function beforeSubmit(form){
    console.info(form.img);
    if(form.regist_phone.value==''){
      alert('电话号码不能为空！');
      form.regist_phone.focus();
      return false;
    }
    if(form.regist_phone.value.length>12){
      alert('电话号码输入错误！');
      form.regist_phone.focus();
      return false;
    }
    if(form.regist_name.value==''){
      alert('昵称不能为空！');
      form.regist_name.focus();
      return false;
    }
    if(form.regist_pwd.value.length<6){
      alert('密码至少为6位，请重新输入！');
      form.regist_pwd.focus();
      return false;
    }
    if(form.regist_pwd_con.value!=form.regist_pwd.value) {
      alert('你两次输入的密码不一致，请重新输入！');
      form.regist_pwd_con.focus();
      return false;
    }
    return true;
  }
</script>
</body>
</html>